<template>
	<div>
		<el-card shadow="never">
			<div slot="header" class="info-tlt">基本信息</div>
			<div class="user-profile">
				<div class="avator-box">
					<el-avatar
						shape="circle"
						style="width: 80px; height: 80px"
						:src="userinfo.avatar"
					></el-avatar>
					<div class="hellow">{{ userinfo.nick_name || userinfo.true_name }}</div>
				</div>
				<ul class="user-education">
					<li class="list-item">姓名：{{ userinfo.true_name }}</li>
					<li class="list-item">
						性别：{{ userinfo.player_sex == 1 ? '男' : userinfo.player_sex == 2 ? '女' : '--' }}
					</li>
					<li class="list-item">国家/地区：{{ userinfo.player_country || '--' }}</li>
					<li class="list-item">手机号：{{ userinfo.mobile }}</li>
					<li class="list-item">年龄：{{ userinfo.player_age || '--' }}</li>
					<li class="list-item">出生日期：{{ userinfo.player_born || '--' }}</li>
					<li class="list-item">证件类型：{{ userinfo.cid == 1 ? '身份证' : '护照' }}</li>
					<li class="list-item">证件号码：{{ userinfo.cid_no }}</li>
					<li class="list-item">紧急联系人：{{ userinfo.contact_name || '--' }}</li>
					<li class="list-item">紧急联系人电话：{{ userinfo.contact_tel || '--' }}</li>
					<li class="list-item">血型：{{ userinfo.player_blood || '--' }}</li>
					<li class="list-item">服装尺码：{{ userinfo.player_clothes || '--' }}</li>
					<li class="list-item" style="width: 100%">
						详细地址：{{
							userinfo.player_province
								? `${userinfo.player_province}${userinfo.player_city}${userinfo.player_region} ${userinfo.player_address}`
								: '--'
						}}
					</li>
					<!-- <el-button size="mini" type="primary">查看绑定亲子</el-button> -->
				</ul>
			</div>
		</el-card>
		<el-card style="margin: 10px 0" shadow="never">
			<div slot="header" class="info-tlt">报名赛事</div>
			<el-table :data="tableData" stripe border highlight-current-row size="small">
				<el-table-column label="序号" width="60px" type="index" align="center" />
				<el-table-column
					label="赛事名称"
					prop="group_name"
					min-width="120px"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column
					label="比赛城市"
					min-width="120px"
					show-overflow-tooltip
					align="center"
					:formatter="row => row.race.city_name || '--'"
				/>
				<el-table-column
					label="报名时间"
					prop="add_time"
					min-width="160px"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column
					label="支付金额(元)"
					prop="pay_money"
					min-width="120"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column
					align="center"
					label="支付状态"
					min-width="110"
					show-overflow-tooltip
					:formatter="row => (row.is_pay == 1 ? '已支付' : '未支付')"
				/>
				<el-table-column
					align="center"
					label="退款状态"
					min-width="110"
					show-overflow-tooltip
					:formatter="
						row =>
							row.refund_status == 1
								? '已申请退款'
								: row.refund_status == 2
								? '已退款'
								: row.refund_status == 3
								? '拒绝退款'
								: '--'
					"
				/>
				<el-table-column
					label="参赛号"
					prop="race_num"
					min-width="120px"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column
					label="领物窗口号"
					prop="window_num"
					min-width="100px"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column
					label="存取衣号"
					prop="clothes_num"
					min-width="100"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column
					label="是否中签"
					min-width="100"
					show-overflow-tooltip
					align="center"
					:formatter="row => (row.is_compete == 1 ? '是' : '否')"
				/>
				<el-table-column
					label="中签时间"
					min-width="160"
					show-overflow-tooltip
					align="center"
					:formatter="row => (row.compete_time != 0 ? row.compete_time : '--')"
				/>
				<el-table-column label="操作" width="100" align="center">
					<template slot-scope="scope">
						<el-button
							type="text"
							v-prevent-click="2000"
							v-if="
								scope.row.is_pay == 1 &&
								scope.row.refund_status !== 1 &&
								scope.row.refund_status !== 2
							"
							@click="$refs.shenhe.initData(scope.row)"
						>
							退费
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-row type="flex" justify="center">
				<el-col :span="24" style="text-align: right">
					<Pagination
						:total="total"
						:page.sync="pageNo"
						:limit.sync="pageSize"
						scroll-el="el-main"
						@pagination="loadData"
					/>
				</el-col>
			</el-row>
		</el-card>
		<el-card shadow="never">
			<div slot="header" class="info-tlt">历史成绩</div>
			<el-table
				:data="scoreData"
				stripe
				border
				highlight-current-row
				size="small"
				style="width: 80%"
			>
				<el-table-column label="序号" width="60px" type="index" align="center" />
				<el-table-column
					label="赛事名称"
					min-width="120px"
					show-overflow-tooltip
					align="center"
					:formatter="row => row.race.race_name || '--'"
				/>
				<el-table-column
					label="比赛城市"
					min-width="120px"
					show-overflow-tooltip
					align="center"
					:formatter="row => row.race.city_name || '--'"
				/>
				<el-table-column
					label="报名时间"
					prop="add_time"
					min-width="160px"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column
					label="成绩"
					prop="all_rank"
					min-width="100"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column label="操作" width="100" align="center">
					<template slot-scope="scope">
						<el-link type="primary" :underline="false" @click="onScan(scope.row)">查看证书</el-link>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<Details ref="details" />
		<Shenhe ref="shenhe" />
		<el-dialog :visible.sync="dialogVisible" title="证书预览" width="700px">
			<img :src="previewUrl" class="pan-img" style="width: 100%" />
		</el-dialog>
	</div>
</template>
<script>
	import { deepClone } from '@/utils'
	import { getInfo, historyScore, createCert } from '@/api/user-manager.js'
	import { adminOrderList } from '@/api/order'
	import Details from './components/details'
	import Pagination from '@/components/Pagination'
	import { throttle } from '@/utils/utils'
	import Shenhe from '@/views/order-manage/components/shenhe'
	export default {
		components: { Details, Pagination, Shenhe },
		data() {
			return {
				userinfo: {},
				tableData: [],
				pageNo: 1,
				pageSize: 10,
				total: 0,
				scoreData: [],
				dialogVisible: false,
				previewUrl: ''
			}
		},
		created() {
			this.getDetailInfo()
			this.loadData()
			this.getHistoryScore()
		},
		methods: {
			async getDetailInfo() {
				const loading = this.$setLoading()
				try {
					const res = await getInfo({ member_id: this.$route.query.id })
					this.userinfo = res.data
					loading.close()
				} catch (e) {
					loading.close()
					console.log(e)
				}
			},
			// 查看证书
			onScan: throttle(function (data) {
				console.log(data)
				if (data.race_cert) {
					this.previewUrl = data.race_cert
					this.dialogVisible = true
				} else {
					createCert(data).then(res => {
						console.log(res)
						this.previewUrl = res.data.url
						this.dialogVisible = true
					})
				}
			}, 1500),
			async logout() {
				await this.$store.dispatch('user/logout')
				this.$router.push(`/login`)
			},
			loadData() {
				const loading = this.$setLoading()
				const data = {
					member_id: this.$route.query.id,
					p: this.pageNo,
					size: this.pageSize
				}
				this.tableData = []
				adminOrderList(data).then(
					res => {
						this.tableData = res.data.lists
						this.total = Number(res.data.total)
						loading.close()
					},
					err => {
						loading.close()
					}
				)
			},
			// 分页
			pageChange({ page, limit }) {
				this.pageNo = page
				this.pageSize = limit
				this.loadData()
			},
			// 历史成绩
			getHistoryScore() {
				historyScore({
					member_id: this.$route.query.id,
					p: 1,
					size: 500
				}).then(res => {
					this.scoreData = res.data.lists
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.info-tlt {
		line-height: 20px;
		&:before {
			content: '';
			float: left;
			width: 4px;
			height: 18px;
			background-color: #37a6e5;
			margin-right: 10px;
		}
	}
	.avator-box {
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 80px;
		margin: 0 15px;
		.hellow {
			margin: 10px 0;
		}
	}
	.user {
		&-profile {
			display: flex;
			align-items: center;
		}
		&-education {
			max-width: calc(100% - 100px);
			margin-left: 20px;
			list-style: none;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			align-content: space-evenly;
			.list-item {
				font-size: 14px;
				line-height: 32px;
				margin: 0 10px;
				flex: auto;
				width: calc(25% - 20px);
			}
			::v-deep {
				.el-button--mini {
					height: 30px;
					padding: 3px 10px;
				}
			}
		}
	}
	::v-deep {
		.el-dialog {
			margin-top: 60px !important;
		}
		.el-dialog .el-dialog__body {
			padding: 0 20px 26px 10px;
			max-height: calc(100vh - 160px);
		}
	}
</style>
